<template>
  <div class="icons-container">
    <div class="mod-menu__icon-list">
      <el-button
        v-for="(item, index) in IconsList"
        :key="index"
        :class="{ 'is-active': item === dataFrom }"
        @click="handleClipboard(item,$event)"
      >
        <i :class="'fast-icon-'+item" />
        <!-- <svg-icon :icon-class="item" class-name="disabled" /> -->
      </el-button>
    </div>
  </div>
</template>

<script>
// import clipboard from '@/utils/clipboard'
import svgIcons from './svg-icons'
import elementIcons from './element-icons'
import fastIcons from './fasticon'

export default {
  name: 'Yesicons',
  props: {
    dataFrom: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      svgIcons,
      elementIcons,
      fastIcons,
      IconsList: []
    }
  },
  created() {
    var icondata = fastIcons['glyphs']
    icondata.some(item => {
      this.IconsList.push(item['font_class'])
    })
  },
  methods: {
    generateIconCode(symbol) {
      return `点击复制${symbol}`
      // return `<svg-icon icon-class="${symbol}" />`
    },
    generateElementIconCode(symbol) {
      return `点击复制${symbol}`
      // return `<i class="el-icon-${symbol}" />`
    },
    handleClipboard(text, event) {
      this.$emit('selectFunc', text)
      // clipboard(text, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: auto;
  // height: 180px;
  max-width: 370px;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    margin: 20px;
    height: 85px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;
  }

  span {
    display: block;
    font-size: 16px;
    margin-top: 10px;
  }

  .disabled {
    pointer-events: none;
  }
}

  .mod-menu {
    .menu-list__input,
    .icon-list__input {
      > .el-input__inner {
        cursor: pointer;
      }
    }

    &__icon-popover {
      max-width: 370px;
    }

    &__icon-list {
      height: 180px;
      overflow-y: auto;
      padding: 0;
      margin: -8px 0 0 -8px;

      > .el-button {
        padding: 8px;
        margin: 8px 0 0 8px;

        > span {
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
    }

    .icon-list__tips {
      font-size: 18px;
      text-align: center;
      color: #e6a23c;
      cursor: pointer;
    }
  }
</style>
